<template>
  <div id="app">
    <header v-if="header">
      <a v-if="!noback" @click="$api.goBack()" class="back"></a>
      <span>{{header}}</span>
    </header>
    <router-view />
    <mt-popup style="background:none;width:100%;" v-model="popupImg" position="center">
      <img style="max-width:10rem;" @click="hidePopup" @touchmove="touchmoveImg" :src="popupImgSrc" />
    </mt-popup>
  </div>
</template>

<script>
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        name: "app",
        data() {
            return {
                // header: this.$route.meta.header
                popupImg: false,
                popupImgSrc: "",
                phone: '',
                password: '',
            };
        },
        computed: {
            header: function() {
                return this.$route.meta.header;
            },
            noback: function() {
                return this.$route.meta.noback;
            }
        },
        watch: {},
        methods: {
            touchmoveImg(target) {
                console.log(target)
            },
            GoBack: function() {
                window.history.go(-1);
            },
            hidePopup() {
                //隐藏评论框
                this.popupImg = false;
            },
            login() { //登录
                let params = {
                        phone: this.phone,
                        password: this.password,
                        userType: '1',
                        cid: '',
                    },
                    that = this;
                if (window.plus) {
                    var info = plus.push.getClientInfo();
                    params.cid = info.clientid;
                    params.token = info.token;
                    params.appid = info.appid;
                    params.appkey = info.appkey;
                }

                this.$api.post('/login/findUserInfo', params, function(data) {
                    if (data.info.studentList[0]) {
                        data.info.studentList[0].checked = true;
                    }
                    sessionStorage.setItem('useInfo', JSON.stringify(data.info));
                    localStorage.setItem('useParams', JSON.stringify(params));
                    that.$router.push({
                        'path': '/dongtai'
                    })
                }, function(err) { //登录失败
                    MessageBox('提示', err.info.msg);
                    that.$router.push({
                        'path': '/login'
                    })
                })
            },
            getUserParams() {
                console.log('123');
                if (sessionStorage.getItem('useInfo')) return; //有登录信息就不用登录
                console.log('223');
                var params = JSON.parse(localStorage.getItem('useParams'));
                if (params) { //如果有缓存账号密码就直接登录
                    this.phone = params.phone;
                    this.password = params.password;
                    this.login();
                } else {
                    this.$router.push({
                        path: 'login'
                    })
                }
            },
            plusReadyFun() {
                this.$api.updata();
                var that = this;
                plus.key.addEventListener("backbutton", function() {
                    if (
                        that.$route.name != "workbench" &&
                        that.$route.name != "mine" &&
                        that.$route.name != "dongtai" &&
                        that.$route.name != "login"
                    ) {
                        if (that.$route.name == "g11") {
                            that.$router.push({
                                path: "workbench"
                            });
                        } else {
                            window.history.go(-1);
                        }
                    } else {
                        //webview.close(); //hide,quit
                        //plus.runtime.quit();
                        //首页返回键处理
                        //处理逻辑：1秒内，连续两次按返回键，则退出应用；
                        var first = null;
                        plus.key.addEventListener(
                            "backbutton",
                            function() {
                                //首次按键，提示‘再按一次退出应用’
                                if (!first) {
                                    first = new Date().getTime();
                                    Toast({
                                        message: "再按一次退出应用!",
                                        position: "top",
                                        duration: 2000
                                    });
                                    setTimeout(function() {
                                        first = null;
                                    }, 2000);
                                } else {
                                    if (new Date().getTime() - first < 2000) {
                                        plus.runtime.quit();
                                    }
                                }
                            },
                            false
                        );
                    }
                });
            }
        },
        mounted() {

            if (!sessionStorage.getItem('useInfo')) this.$router.push('/login');
            this.$api.Golbale.$on("showImgPopup", imgSrc => {
                this.popupImg = true;
                this.popupImgSrc = imgSrc;
            });

            //并没有做数据缓存,所以不需要清除缓存,但是需求有清除缓存,所以这里随机生成假的缓存数据
            var cache = localStorage.getItem('cache');
            if (cache) {
                cache = parseFloat(cache) + 0.1 * Math.random();
            } else {
                cache = 0.1 * Math.random();
            }
            localStorage.setItem('cache', cache);
            if (window.plus) { //当plusReady时,检查是否有新版本,
                this.plusReadyFun()
            } else {
                document.addEventListener('plusready', this.plusReadyFun, false);
            }
            this.getUserParams();
        }
    };
</script>

<style>
    body {
        box-sizing: border-box;
        font-size: 0.3rem;
    }
    
    #app {
        display: flex;
        flex-direction: column;
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        width: 100%;
        height: 100%;
    }
    
    li {
        list-style: none;
    }
    
    ul,
    ol,
    p,
    a,
    h1,
    h2,
    h3,
    h4,
    h5 {
        margin: 0;
        padding: 0;
    }
    
    header {
        background: #0489ff;
        color: white;
        font-size: 0.48rem;
        height: 1.2rem;
        line-height: 1.2rem;
        position: relative;
    }
    
    header a {
        font-size: 0.48rem;
        position: absolute;
        left: 0.4rem;
        text-decoration: none;
        color: black;
    }
    
    .more {
        background-image: url("../static/images/other/more.png");
        width: 0.23rem;
        height: 0.46rem;
        background-size: 100% 100%;
        border: none;
        display: inline-block;
    }
    
    .flex_wrap {
        display: flex;
    }
    
    .start_wrap {
        display: flex;
        width: 3rem;
        justify-content: center;
    }
    
    .start1,
    .start2 {
        background-size: 100% 100%;
        width: 0.4rem;
        height: 0.4rem;
        background-repeat: no-repeat;
        margin: 0 0.1rem;
    }
    
    .start1 {
        background-image: url("../static/images/other/start1.png");
    }
    
    .start2 {
        background-image: url("../static/images/other/start2.png");
    }
</style>